<template>
  <basic-container>
    <div class="content-serial"  style="padding-left: 2px; padding-right: 2px;height: 88vh;overflow-y: auto">
<!--      <el-row :gutter="20">-->
        <el-form :model="form" ref="form" label-width="120px" :inline="true">
<!--          <p class="title-brand" style="margin-top: -2px">设备基本信息</p>-->
          <el-card shadow="hover" style="margin-bottom: 5px;">
            <div slot="header">
              <span>设备基本信息</span>
            </div>
            <el-row :gutter="20">  <!-- gutter 控制列间距 -->
              <el-col :span="12">
            <el-form-item label="安卓板型号" prop="androidModel">
              <el-input v-model="form.androidModel" placeholder="安卓板型号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售单">
              <el-input v-model="form.salesOrderNo" placeholder="请输入销售单号"  clearable></el-input>
            </el-form-item>
          </el-col>
            </el-row>


            <el-row :gutter="20">


          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="form.deviceNo" placeholder="设备编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安卓系统版本">
              <el-input v-model="form.androidVersion" placeholder="安卓系统版本"></el-input>
            </el-form-item>
          </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="运维程序版本">
                  <el-input v-model="form.opsVersion" placeholder="运维程序版本"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

<!--          <p class="title-brand" style="margin-top: -2px">固件信息</p>-->
          <el-card shadow="hover" style="margin-bottom: 5px;">
            <div slot="header">
              <span>固件信息</span>
            </div>
            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主控固件版本">
<!--              <el-input v-model="form.mcFmVersion" placeholder="主控固件版本"></el-input>-->
              <el-select v-model="form.mcFmVersion" placeholder="请选择主控固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in mcFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现磨固件版本">
<!--              <el-input v-model="form.groundModel" placeholder="现磨固件版本"></el-input>-->
              <el-select v-model="form.groundFmVersion" placeholder="请选择现磨固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in groundFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            </el-row>

            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="速溶固件版本">
<!--              <el-input v-model="form.instantFmModel" placeholder="速溶固件版本"></el-input>-->
              <el-select v-model="form.instantFmVersion" placeholder="请选择速溶固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in instantFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="前门固件版本">
<!--              <el-input v-model="form.fdFmModel" placeholder="前门固件版本"></el-input>-->
              <el-select v-model="form.fdFmVersion" placeholder="请选择前门固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in fdFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            </el-row>

            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="支付固件版本">
<!--              <el-input v-model="form.payFmModel" placeholder="支付固件版本"></el-input>-->
              <el-select v-model="form.payFmVersion" placeholder="请选择支付固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in payFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="MDB固件版本">
<!--              <el-input v-model="form.mdbFmModel" placeholder="MDB固件版本"></el-input>-->
              <el-select v-model="form.mdbFmVersion" placeholder="请选择MDB固件版本" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in mdbFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            </el-row>
          </el-card>

<!--          <p class="title-brand" style="margin-top: -2px">4G网络配置</p>-->
          <el-card shadow="hover" style="margin-bottom: 5px;">
            <div slot="header">
              <span>4G网络配置</span>
            </div>
            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="4G模块型号">
<!--              <el-input v-model="form.networkModel" placeholder="4G模块型号"></el-input>-->
              <el-select v-model="form.networkModel" placeholder="请选择4G模块型号" clearable
                         :style="{ width: '95%' }" >
                <el-option v-for="(item, index) in networkModelOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="4G模块编号">
              <el-input v-model="form.networkModelNo" placeholder="4G模块编号"></el-input>
            </el-form-item>
          </el-col>
            </el-row>


            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="4G固件版本">
<!--              <el-input v-model="form.networkFmVersion" placeholder="4G固件版本版本"></el-input>-->
              <el-select v-model="form.networkFmVersion" placeholder="请选择4G固件版本版本" clearable>
                <el-option v-for="(item, index) in networkFmVersionOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
              <el-col :span="12">
                <el-form-item label="系统网络状态">
<!--                  <el-input v-model="form.networkStatus" placeholder="系统网络状态"></el-input>-->
                  <el-switch
                    v-model="form.networkStatus"
                    active-value="true"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
<!--          <p class="title-brand" style="margin-top: -2px">服务器网络配置</p>-->
          <el-card shadow="hover" style="margin-bottom: 5px;">
            <div slot="header">
              <span>服务器配置</span>
            </div>

            <el-row :gutter="20">

              <el-col :span="12">
                <el-form-item label="服务器连接状态">
                  <el-input v-model="form.connectionStatus" placeholder="服务器连接状态"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流量卡编号">
                  <el-input v-model="form.trafficNo" placeholder="请输入流量卡编号"></el-input>
                </el-form-item>
              </el-col>

            </el-row>


            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="存储空间">
              <el-input v-model="form.storageSpace" placeholder="存储空间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流量消耗">
              <el-input v-model="form.traffic" placeholder="流量消耗"></el-input>
            </el-form-item>
          </el-col>
            </el-row>
          </el-card>
<!--          <p class="title-brand" style="margin-top: -2px">其他</p>-->
          <el-card shadow="hover" style="margin-bottom: 5px;">
            <div slot="header">
              <span>其他</span>
            </div>

            <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="售货机软件版本">
              <el-input v-model="form.softVersion" placeholder="售货机软件版本"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务器配置信息">
              <el-input type="textarea" :style="{ width: '200%' }" v-model="form.configs" placeholder="服务器配置信息"></el-input>
            </el-form-item>
          </el-col>
            </el-row>
          </el-card>
        </el-form>
<!--      </el-row>-->
    </div>
    <div style="text-align: center;margin-top: 3px">
      <el-button type="primary" @click="handleSubmit">提 交</el-button>
    </div>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {getDictionary} from "@/api/system/dict";

export default {
  data() {
    return {
      form: {
        androidModel: '',
        salesOrderNo: '',
        deviceNo: '',
        androidVersion: '',
        mcFmVersion: '',
        groundFmVersion: '',
        instantFmVersion: '',
        fdFmVersion: '',
        payFmVersion: '',
        mdbFmVersion: '',
        networkModel: '',
        networkModelNo: '',
        networkFmVersion: '',
        opsVersion: '',
        softVersion: '',
        configs: '',
        networkStatus: '',
        connectionStatus: '',
        storageSpace: '',
        traffic: '',
        trafficNo: '',
      },
      selectionList: [],
      loading: true,
      query: {},
      mcFmVersionOptions:[],
      groundFmVersionOptions: [],
      instantFmVersionOptions:[],
      payFmVersionOptions: [],
      fdFmVersionOptions: [],
      mdbFmVersionOptions: [],
      networkModelOptions: [],
      networkFmVersionOptions:[],
      deviceInfos: {
        model: '',
        deviceInfo: {
          deviceNo: ''
        }
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },

  mounted() {
    console.log("获取安卓信息")
    let info = window.android.getDeviceInfo();
    let deviceInfos = JSON.parse(info);
    this.form.androidModel = deviceInfos.model;
    this.form.deviceNo = deviceInfos.deviceInfo.deviceNo;
    this.form.opsVersion = deviceInfos.tools;
    this.form.softVersion = deviceInfos.vending;
    this.form.androidVersion = deviceInfos.android;
    this.form.storageSpace = deviceInfos.storage;
    this.form.traffic = deviceInfos.traffic;
    this.form.networkStatus = deviceInfos.net
  },

  created() {
    getDictionary({code: "mc_fm_version"}).then(res=>{
      this.mcFmVersionOptions = res.data.data.map((item)=>{
        console.log("itemsss",item)
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
        console.log("主控版本信息",this.mcFmVersionOptions[0])
    });


     getDictionary({code: "ground_fm_version"}).then(res=>{
      this.groundFmVersionOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
      console.log("主控版本信息",this.groundFmVersionOptions[0])
    });


    getDictionary({code: "instant_fm_version"}).then(res=>{
      this.instantFmVersionOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
      console.log("主控版本信息",this.instantFmVersionOptions[0])
    });


    getDictionary({code: "pay_fm_version"}).then(res=>{
      console.log("字典sss",res.data.data)
      this.payFmVersionOptions = res.data.data.map((item)=>{
        console.log("itemsss",item)
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    });

    //fdFmVersionOptions

    getDictionary({code: "fd_fm_version"}).then(res=>{
      this.fdFmVersionOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    });

    // mdbFmVersionOptions: [],
    getDictionary({code: "mdb_fm_version"}).then(res=>{
      this.mdbFmVersionOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    });

    //networkModelOptions: [],

    getDictionary({code: "network_model"}).then(res=>{
      this.networkModelOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    });

    //networkFmVersionOptions:[],
    getDictionary({code: "network_fm_version"}).then(res=>{
      this.networkFmVersionOptions = res.data.data.map((item)=>{
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    });


  },

  methods: {
    // initDic(){
    //   this.mcFmVersionOptions = this.getDicList("mc_fm_version");
    //   console.log("主控版本信息",this.mcFmVersionOptions[0])
    // },
    getDicList(code){
      return getDictionary({code: code}).then(res=>{
        console.log("字典sss",res.data.data)
        return res.data.data.map((item)=>{
          console.log("itemsss",item)

          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        })
      })
    },

  }
};
</script>

<style scoped>

.title-brand {
  border-left: 3px solid #4064eb;
  padding-left: 7px;
  font-size: 15px;
  color: #000c17;
}
</style>
